<template>
  <div class="gutter-example">
    <a-row :gutter="15" style="padding-bottom: 5px;padding-top: 5px;display: flex;align-items: stretch;min-height: 350px">
      <a-col class="gutter-row" :span="16">
        <div class="gutter-box" style="height: 100%;">
          <a-card style="height: 100%" :body-style="{padding:'15px',height: '100%'}">
              <a-tabs  v-model:activeKey="activeKey" @change="callback">
                <a-tab-pane key="1" :tab="$t('abnormalTrend')"></a-tab-pane>
                <!-- <a-tab-pane key="1" tab="异常走势"></a-tab-pane> -->
                <a-tab-pane key="2" :tab="$t('successTrend')"></a-tab-pane>
                <template #tabBarExtraContent>
                  <task-select
                    @changeoption="changeTask($event, 'chartOneTask')"
                    :default-task-id="chartOneTask"
                    style="width: 150px;margin: 0 15px 0 0"
                    :clear="true"
                    :query="{type:[1,2],status:[11,12,13,17]}"
                    aria-placeholder="任务选择"
                  ></task-select>
                  <!--$t('pleaseSelect')+$t('lingjian')-->
                  <a-select
                    style="width: 150px;"
                    v-model:value="chartOneEcuSelected"
                    allowClear
                    placeholder="ECU选择"
                    @change="changeChartOneEcuSelected"
                  >
                    <a-select-option
                      v-for="(item,index) in ecuList"
                      :key="index"
                      :value="item.id"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </template>
              </a-tabs>
            <div style="height: 100%;">
              <loading-state style="position: unset;" :outsidePosition="true" :echartShowStatus="echartShowStatusOne" v-show="activeKey==1">
                <div ref="chartFigureOneBox">
                  <div ref="chartFigureOne" style="height: 240px" v-show="echartShowStatusOne === 2"></div>
                </div>
              </loading-state>
              <loading-state style="position: unset;" :outsidePosition="true" :echartShowStatus="echartShowStatusOne" v-show="activeKey==2">
                <div ref="chartFigureOneItemBox">
                  <div ref="chartFigureOneItem" style="height: 240px" v-show="echartShowStatusOne === 2"></div>
                </div>
              </loading-state>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box" style="height: 100%;">
          <a-card style="height: 100%;" :body-style="{padding:'15px'}">
            <loading-state style="position: unset;" :outsidePosition="true" :echartShowStatus="echartShowStatusTwo">
              <span style="float: left;font-weight: bold;font-size: 19px" v-show="echartShowStatusTwo !== 2">升级漏斗图</span>
              <span style="float: right">{{newTaskName}}</span>
              <div ref="chartFigureTwo" style="height: 300px" v-show="echartShowStatusTwo === 2"></div>
            </loading-state>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="15" style="padding-bottom: 5px;padding-top: 5px;display: flex;align-items: stretch;min-height: 350px">
      <a-col class="gutter-row" :span="16">
        <div class="gutter-box" style="height: 100%;min-height: 370px">
          <a-card style="height: 100%;" :body-style="{padding:'15px'}">
            <a-tabs v-model:activeKey="activeKeyFour" @change="callbackFour"
                    style="height: 300px;width: 100%;float: left;">
              <a-tab-pane key="1" tab="大版本分布"></a-tab-pane>
              <a-tab-pane key="2" tab="ECU版本分布"></a-tab-pane>
              <template #tabBarExtraContent>
                <car-model-code-select
                  :query="{ selectAll: false}"
                  :has-all="false"
                  style="width:150px"
                  placeholder="车型选择"
                  :clear="true"
                  v-model="modelId"
                  @change="changeModelId"
                ></car-model-code-select>
                <!--<a-select-->
                  <!--placeholder="车型选择"-->
                  <!--v-model:value="modelId"-->
                  <!--style="width:150px"-->
                  <!--:options="vehicleVersionArr"-->
                  <!--label-in-value-->
                  <!--allowClear-->
                  <!--@change="changeModelId"-->
                <!--&gt;-->
                <!--</a-select>-->
                <a-select
                  placeholder="ECU选择"
                  v-model:value="ecuModuleId"
                  style="width: 150px"
                  v-show="activeKeyFour==2"
                  @change="changeEcuModuleId"
                  allowClear
                >
                  <a-select-option
                    v-for="(item,index) in ecuSelectedArr"
                    :key="index"
                    :value="item.id"
                    :title="item.name"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <!--<a-select
                  v-model:value="versionType"
                  label-in-value
                  style="width: 100px"
                  :options="[{label:'源版本',value:'1'},{label:'目标版本',value:'2'}]"
                  v-show="activeKeyFour==2"
                  @change="changeVersion"
                >
                </a-select>
                <a-select
                  placeholder="车辆版本"
                  v-model:value="vehicleVersionSelected"
                  style="width: 100px"
                  :options="vehicleVersionOptions"
                  v-show="activeKeyFour==2"
                  label-in-value
                  allowClear
                  @change="changeCarVersion"
                >
                </a-select>

                <a-select
                  v-if="vehicleVersionSelected"
                  placeholder="ECU名称"
                  v-model:value="ecuSelected"
                  style="width: 100px"
                  :options="ecuOptions"
                  v-show="activeKeyFour==2"
                  label-in-value
                  allowClear
                >
                </a-select>
                <a-select
                  v-model:value="ecuSelected"
                  v-else="!vehicleVersionSelected"
                  v-show="activeKeyFour==2"
                  showSearch
                  allow-clear
                  optionFilterProp="children"
                  :filterOption="$commonFun.filterOption"
                  :placeholder="$t('pleaseSelect')+$t('lingjian')"
                  style="width:100px"
                  :maxTagCount="1"
                  @search="getEcuList"
                  @focus="getEcuList"
                  :notFoundContent="isSearch?$t('noData'):$t('ecuNameSearch')"
                >
                  <a-select-option
                    v-for="(item,index) in ecuList"
                    :key="index"
                    :value="item.configSoftwareCode"
                    :title="item.name"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>-->
              </template>
            </a-tabs>
            <div>
              <loading-state :outsidePosition="true" :echartShowStatus="echartShowStatusFour" style="margin-top: 30px;position: unset;"
                             v-show="activeKeyFour==1">
                <div ref="chartFigureFour" style="height: 300px" v-show="echartShowStatusFour === 2"></div>
              </loading-state>
              <loading-state :outsidePosition="true" :echartShowStatus="echartShowStatusFour" style="margin-top: 30px;position: unset;"
                             v-show="activeKeyFour==2">
                <div ref="chartFigureFourTwo" style="height: 300px" v-show="echartShowStatusFour === 2"></div>
              </loading-state>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box" style="height: 100%;min-height: 370px">
          <a-card style="height: 100%;" :body-style="{padding:'15px'}">
            <a-tabs v-model:activeKey="activeKeyThree" @change="callbackThree"
                    style="height: 300px;width: 100%;float: left;">
              <a-tab-pane key="1" tab="任务成功率统计"></a-tab-pane>
              <a-tab-pane key="2" tab="ECU成功率统计"></a-tab-pane>
              <template #tabBarExtraContent>

                <task-select
                  @changeoption="changeTask($event, 'chartThreeTask')"
                  :default-task-id="chartThreeTask"
                  style="width: 150px;margin: 0"
                  :query="{type:[1,2],status:[11,12,13,17]}"
                  :clear="true"
                  v-if="activeKeyThree==2"
                  aria-placeholder="选择任务"
                ></task-select>
              </template>
            </a-tabs>
            <div>
              <loading-state :outsidePosition="true" :echartShowStatus="echartShowStatusThree" style="margin-top: 30px;position: unset;"
                             v-show="activeKeyThree==1">
                <div ref="chartFigureThree" style="height: 300px" v-show="echartShowStatusThree === 2"></div>
              </loading-state>
              <loading-state :outsidePosition="true" :echartShowStatus="echartShowStatusThree" style="margin-top: 30px;position: unset;"
                             v-show="activeKeyThree==2">
                <div ref="chartFigureThreeTwo" style="height: 300px" v-show="echartShowStatusThree === 2"></div>
              </loading-state>
            </div>
          </a-card>
        </div>

      </a-col>
    </a-row>
    <a-row :gutter="15" style="padding-bottom: 5px;padding-top: 5px">
      <a-col class="gutter-row" :span="16">
        <div class="gutter-box">
          <a-card :body-style="{padding:'15px',height: '400px'}">
            <a-tabs v-model:activeKey="activeKeyFive" style="height: 50px">
              <a-tab-pane key="1" tab="任务异常实时列表"/>
              <a-tab-pane key="2" tab="ECU异常实时列表"/>
              <a-tab-pane key="3" tab="生效任务"/>
            </a-tabs>
            <a-table v-show="activeKeyFive == 1" :customRow="clickRow" :columns="columns" :dataSource="failData" :pagination="false" size="small"/>
            <a-table v-show="activeKeyFive == 2" :customRow="clickRow" :columns="ecuColumns" :dataSource="ecuFailData" :pagination="false" size="small">
              <template slot="createTime" slot-scope="text,record">
                <span>{{ !!text ? $commonFun.getDateTimeStr(text) : '-' }}</span>
              </template>
            </a-table>
            <a-table v-show="activeKeyFive == 3" :columns="listsColumns"  :pagination="false" :dataSource="lists" size="small" :scroll="{y:240}">
              <template slot="name" slot-scope="text,scope">
                <a @click="goto(scope)">
                  <span class="taskName">
                    <table-ellipsis :tableEllipsisIsTurnLine="false" :text="scope.name"></table-ellipsis>
                  </span>
                </a>
              </template>
            </a-table>
            <div class="pagination-wrapper" v-show="activeKeyFive == 3">
              <a-pagination
                style="margin-top: 10px"
                size="small"
                :pageSizeOptions="['10', '20', '50']"
                :current="pageInfo.pageNo"
                :pageSize="pageInfo.pageSize"
                :total="pageInfo.totalCount"
                :totalPage="pageInfo.totalPage"
                :showSizeChanger="true"
                @change="changePage"
                :showTotal= "(total)=> '共'+total+'条'"
                @showSizeChange="showSizeChange"
              >
              </a-pagination>
            </div>
    <!--<div v-show="activeKeyFive == 3" class="effectiveTaskComp mb16">-->
              <!--<div class="rightCompMainContBox" style="height:320px">-->
                <!--<full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>-->
                <!--<ul style="height:320px;overflowY: auto"  v-if="lists.length !== 0 && !loading">-->
                  <!--<li class="todo-item" v-for="item in lists" :key="item.id">-->
                    <!--<a @click="goto(item)">-->
                          <!--<span class="taskName">-->
                            <!--<table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis>-->
                          <!--</span>-->
                      <!--<span class="syday">{{ item.surplus }}</span>-->
                    <!--</a>-->
                  <!--</li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</div>-->
          </a-card>
        </div>

      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">
          <a-card :body-style="{padding:'15px',height: '400px'}">
            <loading-state style="position: unset;" :outsidePosition="true" :echartShowStatus="echartShowStatusSix">
              <span style="float: left;font-weight: bold;font-size: 19px" v-show="echartShowStatusSix !== 2">升级方式</span>
              <span style="float: right">{{newTaskName}}</span>
              <div ref="chartFigureSix" style="height: 300px;margin-top: 30px;"
                   v-show="echartShowStatusSix === 2"></div>
            </loading-state>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import lodash from 'lodash'
import {burnoutChartOption} from "@/views/statistics/task/config/chart";
import {figureOneOption} from "@/views/dashboard/config/figureOneOption";
import {figureTwoOption} from "@/views/dashboard/config/figureTwoOption";
import {figureThreeOption} from "@/views/dashboard/config/figureThreeOption";
import {figureFourOption} from "@/views/dashboard/config/figureFourOption";
import {figureSixOption} from "@/views/dashboard/config/figureSixOption";
import {sjdttjChartOption} from "@/views/dashboard/config/chart";
import {sjdttjFailChartOption} from "@/views/dashboard/config/chartFail";
import taskApi from "@/api/modules/task";
import statisticsApi from "@/api/modules/statistics";
import TaskSelect from '@/views/components/TaskSelect'
import moment from "moment";
import {taskPerms} from "@/config/permission";
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import DetailTask from "@/views/components/DetailTask";
import {minxinDrawerUse} from '@/utils/mixin';
import {taskBase} from "@/views/task/components/MinNewTaskBase";
import CarModelCodeSelect from '@/views/components/CarModelCodeSelect'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [minxinDrawerUse],
  props: {
    task: {
      type: [String, Object, Array],
      default () {
        return undefined
      }
    },
  },
  computed:{
    newTaskName(){
      return this.task && this.allTask.length ? this.allTask[this.allTask.findIndex(e=>e.id == this.task)].name : ''
    }
  },
  components: {
    TaskSelect,
    FullParentDomWithDask,
    TableEllipsis, DetailTask,
    CarModelCodeSelect
  },
  data() {

    const _this = this

    return {
      echartShowStatusOne: 3, // 默认为暂无数据
      echartShowStatusTwo: 3, // 默认为暂无数据
      echartShowStatusThree: 3, // 默认为暂无数据
      echartShowStatusFour: 3, // 默认为暂无数据
      echartShowStatusSix: 3, // 默认为暂无数据
      chartOption: lodash.cloneDeep(sjdttjChartOption),
      sjdttjFailChartOption: lodash.cloneDeep(sjdttjFailChartOption),
      chart: null,
      activeKey: "1",
      activeKeyThree: "1",
      activeKeyFour: "1",
      activeKeyFive: "1",
      chartThreeItemOne: {},
      chartThreeItemTwo: {},
      //第四格tab-1
      chartFourItemOne: {},
      chartFourItemTwo: {},
      chartSix: {},
      chartOneTask: undefined,
      chartThreeTask: undefined,
      versionType: {label: '源版本', key: '1'},
      //车辆版本
      vehicleVersionOptions: [],
      vehicleVersionSelected: undefined,
      chartThreeItemOnePage: null,
      taskOptions: [],
      ecuSelected: undefined,
      ecuSelectedArr: [],
      chartOneEcuSelected: undefined,
      ecuOptions: [],
      ecuInputOptions: [],
      ecuList: [],
      ecuModuleId: undefined,
      isSearch: false,
      loading: false,
      lists: [],
      chartFigureOne: null,
      chartFigureOneBox: null,
      chartFigureOneItem: null,
      chartFigureOneItemBox: null,
      loadingOne: false,
      compareOptions: [{
        id: '11',
        name: _this.$t('jccgs')
      }, {
        id: '21',
        name: _this.$t('xzcgs')
      }, {
        id: '100',
        name: _this.$t('sjcgs')
      }],
      compareOptionsOne: [{
        id: '12',
        name: _this.$t('jcsbs')
      }, {
        id: '22',
        name: _this.$t('xzsbs')
      }, {
        id: '101',
        name: _this.$t('sjsbs')
      }],
      compareUpdateType: [
        {id: '1', name: 'ON档立即升级'},
        {id: '2', name: 'OFF档立即升级'},
        {id: '3', name: '预约升级'},
        {id: '4', name: '工厂静默升级'},
        {id: '5', name: '工厂非静默升级'},
        {id: '6', name: '循环测试升级'},
        {id: '7', name: '断电异常OFF档下立即升级'},
        {id: '8', name: '断电异常ON或OK档下立即升级'},
        {id: '9', name: '手机OTA立即升级'},
        {id: '10', name: '手机OTA预约升级'},
        {id: '11', name: 'OFF档双分区升级'},
      ],
      columns: [
        {title: 'VIN', dataIndex: 'vin', width: '50px', ellipsis: true},
        {title: '升级结果', dataIndex: 'upgradeResult', width: '50px', ellipsis: true},
        {title: '升级描述', dataIndex: 'upgradeDesc', width: '50px', ellipsis: true},
        {title: '用户描述', dataIndex: 'updateNoteInfo', width: '50px', ellipsis: true},
        {title: '状态码', dataIndex: 'normalStatus', width: '50px', ellipsis: true},
        {title: '上报时间', dataIndex: 'createTimeStr', width: '50px', ellipsis: true},
      ],
      ecuColumns: [
        {title: 'ECU名称', dataIndex: 'ecuName', width: '50px', ellipsis: true},
        {title: '升级结果', dataIndex: 'ecuUpgradeResult', width: '50px', ellipsis: true},
        {title: '升级描述', dataIndex: 'ecuReason', width: '50px', ellipsis: true},
        {title: '状态码', dataIndex: 'ecuStatus', width: '50px', ellipsis: true},
        {title: '故障码', dataIndex: 'diagnosticTroubleCode', width: '50px', ellipsis: true},
        {
          title: '上报时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
          ellipsis: true,
          width: '100px'
        },
        // {title: '上报时间', dataIndex: 'createTime', width: '50px', ellipsis: true},
      ],
      listsColumns: [
        {title: '任务名称', dataIndex: 'name', scopedSlots: { customRender: 'name' }, width: 200, ellipsis: true},
        {title: '剩余时间', dataIndex: 'surplus', width: 200, ellipsis: true}
      ],
      failData: [],
      ecuFailData: [],
      chartOnePage: { //走势图分页
        successPage: 1,
        failPage: 1,
      },
      modelId:undefined,
      vehicleVersionArr: [],
      allTask: [],
      pageInfo: {
        pageSize: 10,
        pageNo: 1,
        totalCount: 0,
        totalPage: 0,
      },
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  activated() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.resize);
    })
  },
  deactivated() {
    window.removeEventListener('resize', this.resize)
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.resize);
    })
  },
  watch: {
    task (newV) {
      this.chartOneEcuSelected = undefined
      this.chartOneTask = newV
      this.chartThreeTask = newV
      this.createFigureOne(this.activeKey)
      this.getFunnelDiagramData()
      this.getEcuByTaskId()
      this.initFigureFiveFailTable()
      this.initFigureFiveEcuFailTable()
      this.loadData()
      this.createFigureSix()
    },
    ecuModuleId () {
      // this.changeEcuModuleId()
    },
    vehicleVersionSelected: {
      handler() {
        //根据车辆版本加载ecu列表

        if (!this.vehicleVersionSelected) {
          this.ecuList = [];
          this.ecuSelected = undefined;
          return
        }
        // if (!this.ecuSelected) {
        //   //todo 多媒体固定ecuModuleId
        //   this.ecuSelected = {key: this.ecuModuleId, label: "多媒体安卓"};
        // }
        taskApi.getEcuVersionCountReport({vehicleVersion: this.vehicleVersionSelected.label}).then(res => {
          this.ecuOptions = res.data.map((item) => {
            return {label: item.name || "无版本号", value: item.ecuModuleId};
          })
        })
      },
      // immediate: true
    },
    ecuSelected: {
      handler() {
        this.$nextTick(() => {
          //根据车辆版本加载ecu列表
          let _this = this;
          // let optionTwo = figureFourOption[1];
          /*taskApi.ecuVersionCountReportByEcuModuleId({
            ecuModuleId: _this.ecuSelected ? _this.ecuSelected.key : _this.ecuModuleId,
            vehicleVersion: _this.vehicleVersionSelected ? _this.vehicleVersionSelected.label : undefined
          }).then(res => {
            let xAxis = [];
            let series = [];
            let seriesOri = [];
            let resultCount = 0;
            res.data.forEach(vehicleCount => {
              resultCount += (vehicleCount.count || 0);
            })

            res.data.forEach(item => {
              xAxis.push(item.version || "无版本号");
              seriesOri.push(item.count || 0);
              series.push(((item.count / (resultCount)) * 100).toFixed(4));
            })

            optionTwo.xAxis.data = xAxis;
            optionTwo.series = [{
              name: 'vehiclePer',
              type: 'bar',
              itemStyle: {
                color: '#5470c6'
              },
              data: series
            }, {
              name: 'vehicle',
              type: 'bar',
              data: seriesOri
            }];
            this.chartFourItemTwo.setOption(optionTwo, true);
          })*/
        })
      },
      immediate: true,
    }
  },
  async created() {
    // this.createFigureOne(this.activeKey);
    let res = await taskApi.getTaskSelect({type: [1, 2]})
    this.allTask = res.data
    this.createFigureThree(this.activeKeyThree);
    this.createFigureFour(this.activeKeyFour);
    this.initFigureFiveFailTable();
    this.initFigureFiveEcuFailTable();
    this.$hasPermission([taskPerms.view]) && this.loadData()
    //初始车辆版本下拉
    // taskApi.getVehicleCountReport().then(res => {
    //   this.vehicleVersionOptions = res.data.map((item, index) => {
    //     return {label: item.key || "无版本号", value: index};
    //   })
    // })
  },
  methods: {
    clickRow (record) {
      return {
        on: {
          click: event => {
            this.$router.push({ path: '/statistics/monitorList', query: { vin: record.vin } })
          }
        }
      }
    },
    getFunnelDiagramData () {
      taskApi.getDataByTaskId({ taskId: this.task }).then(res => {
        let dictionaryObj = {
          DownloadSuccess: '下载成功',
          UpdateSuccess: '安装成功',
          CheckedPackage: '检测成功'
        }
        let keys = Object.keys(dictionaryObj)
        let hasWantData = false
        res.data.forEach(e => {
          if (keys.includes(e.taskName)) {
            hasWantData = true
          }
        })
        if (!res.data || !res.data.length || !hasWantData) {
          this.echartShowStatusTwo = 3
          return
        }
        figureTwoOption.series[0].data = []
        figureTwoOption.series[1].data = []
        figureTwoOption.legend.data = res.data.map(e => dictionaryObj[e.taskName])
        res.data.forEach(e => {
          if (keys.includes(e.taskName)) {
            let obj = {
              value: !e.count || !e.totalCount ? 0 : ((e.count / e.totalCount) * 100).toFixed(2),
              name: dictionaryObj[e.taskName],
              count:e.count,
              totalCount:e.totalCount,
            }
            figureTwoOption.series[0].data.push(obj)
            figureTwoOption.series[1].data.push(obj)
          }
        })
        this.createFigureTwo(figureTwoOption)
      })
    },
    changeChartOneEcuSelected () {
      this.createFigureOne(this.activeKey)
    },
    /**
     * 根据车型筛选ECU
     * @param modelId 车型Id
     * @param arrName 要保存的数组名
     */
    getEcuByModelCode(modelCode) {
      // 获取车辆版本下拉框
      // taskApi.vehicleVersion({ modelId: this.modelId, versionType: this.versionType.key }).then(res => {
      //   this.vehicleVersionOptions = res.data.map((item, index) => {
      //     return {label: item || "无版本号", value: index};
      //   })
      // })
      taskApi.getEcuByModelCode({ modelCode }).then(res=>{
        this.ecuSelectedArr = res.data
      })
    },
    changeModelId(){
      if (this.activeKeyFour == 2) {
        if (this.modelId) {
          this.getEcuByModelCode(this.modelId)
        } else {
          this.ecuModuleId = undefined
          this.ecuSelectedArr = []
        }
      } else {
        this.chartFourItemOne = undefined
        this.createFigureFour(this.activeKeyFour);
      }
    },
    changeEcuModuleId(){
      // this.vehicleVersionSelected=undefined
      // this.ecuSelected=undefined
      this.clearEchart(this.chartFourItemTwo)
      this.createFigureFour('2')
    },
    changeCarVersion(){
      this.ecuSelected=undefined
    },
    callback(key) {
      //todo
      this.createFigureOne(key);
    },
    callbackThree(key) {
      //todo
      this.createFigureThree(key);
    },
    callbackFour(key) {
      //todo
      // if (key == 2) {
      //   this.getEcuByModelId()
      // }
      // this.modelId = undefined
      this.clearEchart(this.chartFourItemTwo)
      this.clearEchart(this.chartFourItemOne)
      this.createFigureFour(key);
    },
    callbackFive() {
      //todo

    },
    //初始化第一张图
    createFigureOne(key) {
      this.initFigureOneItem(key);
    },
    //初始化第二张图
    createFigureTwo(option) {
      if (!this.task) {
        this.echartShowStatusTwo = 3
        return
      }
      this.echartShowStatusTwo = 2;
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.chartFigureTwo);
        this.chart.setOption(option);
      })
    },
    //初始化第三格
    createFigureThree(key) {
      if (!this.task) {
        this.echartShowStatusThree = 3
        return
      }
      const _this = this
      this.echartShowStatusThree = 2;
      this.$nextTick(() => {
        if (key == 1) {
          this.chartThreeItemTwo = undefined
          //初始化任务成功率统计
          _this.getTaskPageData(key);
          // this.chartThreeItemOne.on('timelinechanged', function (timeLineIndex) {
          //   _this.getTaskPageData(key, timeLineIndex);
          // });
        } else if (key == 2) {
          this.chartThreeItemOne = undefined
          //初始化ECU任务成功率统计
          //获取任务下拉数据
          // taskApi.getTaskSelect({type: [1, 2]}).then((res) => {
          //   this.taskOptions = res.data.map(item => {
          //     let name = item.name
          //     if (item.type === 10) {
          //       name += '[' + this.$t('cycleTestTask') + ']'
          //     }
          //     return {
          //       id: item.id,
          //       name: name
          //     }
          //   })
          //
          //   //初始化任务成功率统计
          //   if (this.taskOptions.length > 0) {
          //
              _this.getEcuTaskPageData(key);
          //   }
          // })
        }
      })
    },
    //初始化第四格
    createFigureFour(key) {
      if (!this.task) {
        this.echartShowStatusFour = 3
        return
      }
      const _this = this
      this.echartShowStatusFour = 2;
      const echartPublicDispose = {
        // grid: { width: '1000px' },
        dataZoom: [
          { type: 'slider', start: 0, end: 10, xAxisIndex: [0], bottom: -20, throttleDelay: 1000, orient: 'horizontal' }
        ]
      }
      //初始化大版本分布比率
      if (key == 1) {
        this.chartFourItemOne = undefined
        let option = figureFourOption[key - 1]
        taskApi.vehicleCount({ modelId: this.modelId }).then(res => {
          if (!res.data || res.data.length == 0) {
            this.echartShowStatusFour = 3
            return
          }
          let xAxis = []
          let series = []
          let seriesOri = []
          let resultCount = 0
          res.data.forEach(vehicleCount => {
            resultCount += (vehicleCount.count || 0)
          })

          res.data.forEach(item => {
            xAxis.push(item.key || '无版本号')
            seriesOri.push(item.count || 0)
            series.push(((item.count / (resultCount)) * 100).toFixed(4))
          })

          option.xAxis.data = xAxis
          option.xAxis.axisLabel.interval = 0
          option.xAxis.axisLabel.rotate = 40
          option.series = [{
            name: 'vehiclePer',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              color: '#5470c6'
            },
            data: series
          }, {
            name: 'vehicle',
            type: 'bar',
            barWidth: 40,
            data: seriesOri,
            itemStyle: {
              color: 'rgba(0,0,0,0)'
            },
          }]
          this.$nextTick(() => {
            this.chartFourItemOne = _this.$echarts.init(this.$refs.chartFigureFour)
            option && this.chartFourItemOne.setOption({ ...option, ...echartPublicDispose })
          })
        })
      } else if (key == 2) {
        let _this = this
        this.chartFourItemTwo = undefined
        let optionTwo = figureFourOption[1]
        let param = {
          modelId: this.modelId,
          ecuModuleId: this.ecuModuleId
        }
        /* 根据车辆版本加载ecu列表
        taskApi.ecuVersionCountReportByEcuModuleId(param).then(res => {
          let xAxis = [];
          let series = [];
          let seriesOri = [];
          let resultCount = 0;
          res.data.forEach(vehicleCount => {
            resultCount += (vehicleCount.count || 0);
          })

          res.data.forEach(item => {
            xAxis.push(item.version || "无版本号");
            seriesOri.push(item.count || 0);
            series.push(((item.count / (resultCount)) * 100).toFixed(4));
          })

          optionTwo.xAxis.data = xAxis;
          optionTwo.series = [{
            name: 'vehiclePer',
            type: 'bar',
            itemStyle: {
              color: '#5470c6'
            },
            data: series
          }, {
            name: 'vehicle',
            type: 'bar',
            data: seriesOri
          }];
          optionTwo && this.chartFourItemTwo.setOption(optionTwo, true);
        })
        */
        taskApi.countEcuVersionByEcuModelId(param).then(res => {
          if (!res.data || res.data.length == 0) {
            this.echartShowStatusFour = 3
            return
          }
          let xAxis = []
          let series = []
          let seriesOri = []
          let seriesName = []
          let resultCount = 0
          res.data.forEach(vehicleCount => {
            resultCount += (vehicleCount.count || 0)
          })
          res.data.forEach(item => {
            xAxis.push(item.key || '无版本号')
            seriesOri.push(item.count || 0)
            seriesName.push(item.keyName || '无ECU名称')
            series.push(((item.count / (resultCount)) * 100).toFixed(4))
          })
          optionTwo.xAxis.data = xAxis
          optionTwo.series = [{
            name: 'vehiclePer',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              color: '#5470c6'
            },
            data: series
          }, {
            name: 'vehicle',
            type: 'bar',
            barWidth: 40,
            data: seriesOri,
            itemStyle: {
              color: 'rgba(0,0,0,0)'
            }
          }, {
            name: 'vehicle',
            type: 'bar',
            barWidth: 40,
            data: seriesName,
            itemStyle: {
              color: 'rgba(0,0,0,0)'
            },
          }]
          this.$nextTick(() => {
            this.chartFourItemTwo = _this.$echarts.init(this.$refs.chartFigureFourTwo)
            optionTwo && this.chartFourItemTwo.setOption({ ...optionTwo, ...echartPublicDispose })
          })
        })
      }
    },
    //初始化第六格
    createFigureSix() {
      if (!this.task) {
        this.echartShowStatusSix = 3
        return
      }
      this.echartShowStatusSix = 2;
      taskApi.countUpdateTypeVehicle({ taskId: this.task }).then(res => {
        if (!res.data || res.data.length == 0 || JSON.stringify(res.data) == '{}') {
          this.echartShowStatusSix = 3
          return
        }
        const series = []
        let dictionaryObj = {
          1: 'ON 档立即升级',
          2: 'OFF 档立即升级',
          3: '预约升级',
          4: '工厂静默升级',
          5: '工厂非静默升级',
          6: '循环测试升级',
          7: '断电异常 OFF 档下立即升级',
          8: '断电异常 ON 或 OK档下立即升级',
          9: '手机 OTA 立即升级',
          10: '手机 OTA 预约升级',
          11: 'OFF 档双分区升级'
        }
        let keys = Object.keys(dictionaryObj)
        let totalCount = 0
        res.data.forEach(e => {
          totalCount += (e.count || 0)
        })
        res.data.forEach(e => {
          if (keys.includes(e.key)) {
            let obj = {
              value: !e.count || !totalCount ? 0 : ((e.count / totalCount) * 100).toFixed(2),
              name: dictionaryObj[e.key],
              count: e.count,
              totalCount
            }
            series.push(obj)
          }
        })
        // res.data.forEach(item => {
        //   const name = this.getQueryKeyName(item.key)
        //   if (!name) {
        //     this.echartShowStatusSix = 3
        //     console.error('返回的' + key + '在前端没有对应的名称')
        //     return
        //   }
        //   const seriesItem = {
        //     name: name,
        //     value: item.count
        //   }
        //   series.push(seriesItem)
        // })
        figureSixOption.series[0].data = series;
        this.$nextTick(() => {
          this.chartSix = this.$echarts.init(this.$refs.chartFigureSix);
          this.chartSix.setOption(figureSixOption);
        })
      }).catch(() => {
        this.echartShowStatusSix = 3
      })
    },
    async getTaskPageData(key, timeLineIndex) {
      return taskApi.taskSuccessList(this.allTask.map(e => { return { taskId: e.id, taskName: e.name } })).then(res=>{
        if (!res.data || res.data.length == 0) {
          this.echartShowStatusThree = 3
          return
        }
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return `${params[0].name}<br>数量：${params[1].value}<br>占比：${params[0].value}%`
              // return param0.name+"<br>"+"车辆："+param1.value+"<br>"+"占比："+param0.value + "%";
            }
          },
          // legend: {
          //   left: 100,
          //   top:20,
          //   data: ['大版本升级'] //, 'DiLink升级'
          // },
          toolbox: {
            show: true,
          },
          xAxis: [
            {
              type: 'category',
              axisLabel:{
                show:true,
                interval:0,
                formatter: function (params) {
                  let val = "";
                  if (params.length > 10) {
                    val = params.substr(0, 5) + "\n" + params.substr(5, 5) + "..."
                    return val;
                  } else if (params.length < 10 && params > 5) {
                    val = params.substr(0, 5) + "\n" + params.substr(5, 10) + "..."
                    return val;
                  } else {
                    return params;
                  }
                }
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              max:100,
              min:0,
              interval:20,
              axisLabel: {
                formatter: function (s) {
                  return s + "%";
                }
              },
              data: ['20', '40', '60', '80', '100']
            }
          ],
          barGap: '-100%',
          series: [
            {
              name: '大版本升级',
              type: 'bar',
              data: [],
              barWidth: 40,
              itemStyle: {
                color: '#5470c6',
                // normal: {
                //   barBorderRadius: [10, 10, 0, 0]
                // }
              },
            },
            // {
            //   name: 'DiLink升级',
            //   type: 'bar',
            //   data: [
            //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            //   ],
            // }
            {
              name: 'vehicle',
              type: 'bar',
              data: [],
              barWidth: 40,
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              },
            }
          ]
        };
        for (let item of res.data) {
          option.xAxis[0].data.push(item.taskName || '无版本号')
          option.series[0].data.push(((item.count / item.totalCount) * 100).toFixed(4) || 0)
          option.series[1].data.push(item.count || 0)
        }
        this.$nextTick(() => {
          this.chartThreeItemOne = this.$echarts.init(this.$refs.chartFigureThree);
          this.chartThreeItemOne.setOption(option);
        })
      }).catch(e=>{
        this.echartShowStatusOne = 3
      })

      // let pageInfo = {};
      // if (timeLineIndex) {
      //   pageInfo = {pageNo: timeLineIndex.currentIndex + 1, pageSize: 10}
      // }
      // return taskApi.getTaskPageData(pageInfo).then(res => {
      //   //页数
      //   let returnNew = ((data) => {
      //     let rePage = [];
      //     let options = [];
      //     for (let i = 1; i <= data; i++) {
      //       rePage.push(i + "");
      //       options.push({});
      //     }
      //     return {rePage, options};
      //   })(res.totalPage);
      //   figureThreeOption[key - 1].baseOption.timeline.data = returnNew.rePage;
      //   figureThreeOption[key - 1].options = returnNew.options;
      //   let option = {
      //     xAxis: {
      //       type: 'category',
      //       data: [],
      //       axisLabel: {
      //         interval: 0,
      //         formatter: function (params) {
      //           let val = "";
      //           if (params.length > 10) {
      //             val = params.substr(0, 5) + "\n" + params.substr(5, 5) + "..."
      //             return val;
      //           } else if (params.length < 10 && params > 5) {
      //             val = params.substr(0, 5) + "\n" + params.substr(5, 10) + "..."
      //             return val;
      //           } else {
      //             return params;
      //           }
      //         }
      //       },
      //     },
      //     yAxis: {
      //       type: 'value',
      //       max: 100,
      //       min: 0,
      //       interval: 20,
      //       axisLabel: {
      //         formatter: function (s) {
      //           return s + "%";
      //         }
      //       },
      //       data: ['20', '40', '60', '80', '100']
      //     },
      //     series: [{
      //       type: 'bar',
      //       data: []
      //     }]
      //   }
      //
      //   let xData = [];
      //   let seriesData = [];
      //   res.data.forEach(data => {
      //     xData.push(data.name);
      //     seriesData.push(Number(((data.successVehicle / (data.totalVehicle == 0 ? 1 : data.totalVehicle)) * 100).toFixed(0)))
      //   })
      //
      //   option.xAxis.data = xData;
      //   option.series[0].data = seriesData;
      //   if (timeLineIndex) {
      //     figureThreeOption[key - 1].options[timeLineIndex.currentIndex] = option;
      //   } else {
      //     figureThreeOption[key - 1].options[0] = option;
      //   }
      //   this.chartThreeItemOne.setOption(figureThreeOption[key - 1]);
      // }).catch(() => {
      //   this.echartShowStatusOne = 3
      // });
    },

    getEcuTaskPageData(key) {
      return taskApi.upgradeEcuStatistics({ taskIds: [this.chartThreeTask] }).then(res => {
        if (!res.data || res.data.length == 0) {
          this.echartShowStatusThree = 3
          return
        }
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return `${params[0].name}<br>数量：${params[1].value}<br>占比：${params[0].value}%`
              // return param0.name+"<br>"+"车辆："+param1.value+"<br>"+"占比："+param0.value + "%";
            }
          },
          // legend: {
          //   left: 100,
          //   top:20,
          //   data: ['ECU成功率']
          // },
          toolbox: {
            show: true,
          },
          xAxis: [
            {
              type: 'category',
              axisLabel:{
                show:true,
                interval:0,
                formatter: function (params) {
                  let val = "";
                  if (params.length > 10) {
                    val = params.substr(0, 5) + "\n" + params.substr(5, 5) + "..."
                    return val;
                  } else if (params.length < 10 && params > 5) {
                    val = params.substr(0, 5) + "\n" + params.substr(5, 10) + "..."
                    return val;
                  } else {
                    return params;
                  }
                }
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              max:100,
              min:0,
              interval:20,
              axisLabel: {
                formatter: function (s) {
                  return s + "%";
                }
              },
              data: ['20', '40', '60', '80', '100']
            }
          ],
          barGap: '-100%',
          series: [
            {
              name: 'ECU成功率',
              type: 'bar',
              data: [],
              barWidth: 40,
              itemStyle: {
                color: '#5470c6',
                // normal: {
                //   barBorderRadius: [10, 10, 0, 0]
                // }
              },
            },
            // {
            //   name: 'DiLink升级',
            //   type: 'bar',
            //   data: [
            //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            //   ],
            // }
            {
              name: 'vehicle',
              type: 'bar',
              data: [],
              barWidth: 40,
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              },
            }
          ]
        };
        for (let item of res.data) {
          option.xAxis[0].data.push(item.name || '无版本号')
          option.series[0].data.push(((item.success / (item.success + item.notStart + item.running + item.notComplete +
            item.fail + item.awakening + item.awkeningFail)) * 100).toFixed(4))
          option.series[1].data.push(item.success)
        }
        this.chartThreeItemTwo = this.$echarts.init(this.$refs.chartFigureThreeTwo)
        this.chartThreeItemTwo.setOption(option);
      }).catch(e=>{
        this.echartShowStatusThree = 3
      })
      /*let option = figureThreeOption[key - 1];
      //组装数据
      let taskId = "";
      if (this.task) {
        taskId = this.task;
      } else {
        taskId = this.taskOptions[0].id;
      }
      this.chartThreeItemTwo = this.$echarts.init(this.$refs.chartFigureThreeTwo);
      taskApi.ecuList(this.task).then(res => {
        let xAxis = [];
        let series = [];
        res.data.forEach(ecuCount => {
          xAxis.push(ecuCount.name);
          series.push((ecuCount.success
            /
            (ecuCount.success + ecuCount.notStart + ecuCount.running
              + ecuCount.notComplete + ecuCount.fail + ecuCount.awakening + ecuCount.awkeningFail)) * 100
          );
        })
        option.xAxis.data = xAxis;
        option.series[0].data = series;
        option && this.chartThreeItemTwo.setOption(option);
      })*/
    },
    getEcuByTaskId(){
      taskApi.getEcuByTaskId({ taskId: this.chartOneTask }).then(res => {
        this.ecuList = res.data
      })
    },
    changeTask(val,key) {
      if (!this.task) {
        return
      }
      this[key] = val
      if (key == 'chartOneTask') {
        if (!val) {
          this.echartShowStatusOne = 3
          this.ecuList = []
        } else {
          this.getEcuByTaskId()
          this.createFigureOne(this.activeKey)
        }
      } else if (key == 'chartThreeTask') {
        if (val) {
          this.chartThreeItemTwo = undefined
          this.getEcuTaskPageData('2');
        }
      }
    },
    // 获取零件选项
    getEcuList(value = '') {
      const vm = this
      vm.ecuList = []
      vm.isSearch = false
      if (!value) return
      vm.isSearch = true
      vm.$api.getAllEcu({name: value.trim(), containConfigSoftwareCode: true}).then(response => {
        vm.ecuList = response.data
      })
    },
    //初始化异常监控列表
    initFigureFiveFailTable() {
      if (!this.task) {
        return;
      }
      let _this = this;
      let params = {
        vin: '',
        taskName: '',
        modelIds: [],
        batchId: '',
        upgradeResult: ['检测失败', '安装失败', '下载失败'],
        createTimeLte: '',
        createTimeGte: '',
        taskType: 1,
        pageNo: 1,
        pageSize: 7,
        taskId: this.task
      };
      /*setInterval(function () {
        statisticsApi.upgradeMonitorList(params).then(res => {
          _this.failData = res.data;
        })
      }, 10000)*/

      statisticsApi.upgradeMonitorFailList(params).then(res => {
        _this.failData = res.data;
      })
    },
    initFigureFiveEcuFailTable() {
      let _this = this;
      let params = {
        taskName: '',
        modelIds: [],
        createTimeLte: '',
        createTimeGte: '',
        dashbordFlag: true,
        taskType: 1,
        pageNo: 1,
        pageSize: 7,
        taskId: this.task
      };
      /*setInterval(function () {
        statisticsApi.upgradeMonitorList(params).then(res => {
          _this.failData = res.data;
        })
      }, 10000)*/

      statisticsApi.getOtaUpdateHisDetailList(params).then(res => {
        _this.ecuFailData = res.data;
      })
    },
    loadData() {
      // 只查进行中的任务
      this.lists = []
      this.loading = true
      let params = {
        status: 12,
        pageSize: this.pageInfo.pageSize,
        pageNo: this.pageInfo.pageNo,
        order: 'endTime,ASC'
      }
      taskApi.getTaskPageData(params).then(res => {
        this.lists = res.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            status: item.status,
            surplus: this.getSurplusDays(item.endTime)
          }
        })
        this.pageInfo.totalCount = res.totalCount
        this.pageInfo.totalPage = res.totalPage
      }).finally(() => {
        this.loading = false
      })
    },
    changePage (page) {
      this.pageInfo.pageNo = page
      this.loadData()
    },
    showSizeChange (current, size) {
      this.pageInfo.pageSize = size
      this.pageInfo.pageNo = 1
      this.loadData()
    },
    // 获取剩余天数
    getSurplusDays(endTime) {
      return this.$t('surplusDay').replace('__CONTENT__', Math.ceil(moment(endTime).diff(moment(), 'hours') / 24))
    },
    /*    goto(item) {
          this.$router.push({
            path: '/campaign',
            query: {
              action: 'detail',
              id: item.id,
              type: item.type,
              name: item.name
            }
          })
        },*/
    goto(record) {
      const buttons = []
      this.showRightDrawer(DetailTask, record.name, buttons, 'huge', {taskId: record.id, type: record.type})
    },
    handleTrendEcharts(){
      if (this.activeKey == 1) {
        // this.chartFigureOne
        // this.chartFigureOne

      }else{
        // this.chartFigureOneItem
        // this.chartFigureOneItem

      }
    },
    //初始化第二格--成功趋势图
    /*    initFigureOneItem(){
          let chartFigureOneItem = this.$echarts.init(this.$refs.chartFigureOneItem);
          chartFigureOneItem.setOption(sjdttjChartOption);
        },*/
    initFigureOneItem(key) {
      this.clearChart()
      if (!this.task) {
        this.echartShowStatusOne = 3
        return
      }
      if (!this.chartOneTask) {
        this.echartShowStatusOne = 3
        return
      }
      this.loadingOne = true
      this.echartShowStatusOne = 1
      const echartPublicDispose = {
        // grid: { width: '1000px' },
        dataZoom: [
          { type: 'slider', show: true, start: 0, end: 34, xAxisIndex: [0], bottom: -20, throttleDelay: 1000, orient: 'horizontal' }]
      }
      let params = {
        taskId: this.chartOneTask,
        ecuModuleId: this.chartOneEcuSelected || 'Null',
        success: key == 2
      }
      if (key == 1) {
        this.chartFigureOneItem = undefined
        statisticsApi.countVehicleByUpgradeStatus(params).then(res => {
          const data = res.data
          if (JSON.stringify(data) === '{}' || JSON.stringify(data.yaxisData) === '{}') {
            this.echartShowStatusOne = 3
            return
          }
          data.xaxisData = data.xaxisData.reverse()
          this.echartShowStatusOne = 2
          const chartOptionData = { ...this.changeOptionData(data, key), ...echartPublicDispose }
          this.$nextTick(() => {
            this.initChart()
            this.setOption(chartOptionData)
          })
        }).catch(() => {
          this.echartShowStatusOne = 3
        })
      } else if (key == 2) {
        this.chartFigureOne = undefined
        statisticsApi.countVehicleByUpgradeStatus(params).then(res => {
          const data = res.data
          if (JSON.stringify(data) === '{}' || JSON.stringify(data.yaxisData) === '{}') {
            this.echartShowStatusOne = 3
            return
          }
          data.xaxisData = data.xaxisData.reverse()
          this.echartShowStatusOne = 2
          const chartOptionData = { ...this.changeOptionData(data, key), ...echartPublicDispose }
          this.$nextTick(() => {
            this.initChartTwo()
            this.setOptionTwo(chartOptionData)
          })
        }).catch(() => {
          this.echartShowStatusOne = 3
        })
      }
      this.loadingOne=false
    },
    initChart() {
      if (this.chartFigureOne) {
        return
      }
      this.chartFigureOne = this.$echarts.init(this.$refs.chartFigureOne)
    },
    initChartTwo() {
      if (this.chartFigureOneItem) {
        return
      }
      this.chartFigureOneItem = this.$echarts.init(this.$refs.chartFigureOneItem)
    },
    setOption(option) {
      if (!this.chartFigureOne) {
        return
      }
      this.chartFigureOne.setOption(option)
    },
    setOptionTwo(option) {
      if (!this.chartFigureOneItem) {
        return
      }
      this.chartFigureOneItem.setOption(option)
    },
    changeOptionData(data, index) {
      const series = []
      Object.keys(data.yaxisData).forEach((key) => {
        const name = this.getQueryKeyName(key, index)
        if (!name) {
          console.error('返回的' + key + '在前端没有对应的名称')
          return
        }
        const seriesItem = {
          name: name,
          type: 'line',
          symbol: 'none',
          smooth: true,
          data: data.yaxisData[key].reverse()
        }
        series.push(seriesItem)
      })


      let optionData = null;
      if (index == 1) {
        optionData = {
          ...this.sjdttjFailChartOption,
          xAxis: [
            {
              type: 'category',
              data: data.xaxisData,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          series
        }
        optionData.legend.data = [this.$t('jcsbs'), this.$t('xzsbs'), this.$t('sjsbs')]
      } else if (index == 2) {
        optionData = {
          ...this.chartOption,
          xAxis: [
            {
              type: 'category',
              data: data.xaxisData,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          series
        }
        optionData.legend.data = [this.$t('jccgs'), this.$t('xzcgs'), this.$t('sjcgs')]
      }
      return optionData
    },

    clearChart() {
      this.chartFigureOneItem && this.chartFigureOneItem.clear()
    },
    clearEchart(obj) {
      console.log(obj)
      obj?.clear ? obj.clear() : ''
    },

    getQueryKeyName(key, index) {
      let obj = null;
      if (index == 1) {
        obj = this.compareOptionsOne.find(item => item.id === key)
      } else if (index == 2) {
        obj = this.compareOptions.find(item => item.id === key)
      } else {
        obj = this.compareUpdateType.find(item => item.id === key)
      }
      if (obj) {
        return obj.name
      }
      return ''
    },
    resize() {
      if (this.chart) {
        this.chart?.resize();
      }
      if (this.chartFigureOne != undefined) {
        this.chartFigureOne?.resize();
      }
      if (this.chartFigureOneItem != undefined) {
        this.chartFigureOneItem?.resize();
      }
      if (this.chartThreeItemOne != undefined) {
        this.chartThreeItemOne?.resize();
      }
      if (this.chartThreeItemTwo != undefined) {
        this.chartThreeItemTwo?.resize();
      }
      if (this.chartFourItemOne != undefined) {
        this.chartFourItemOne?.resize();
      }
      if (this.chartFourItemTwo != undefined) {
        this.chartFourItemTwo?.resize();
      }
      if (this.chartSix != undefined) {
        this.chartSix?.resize();
      }
    }
  }
}
</script>
<style scoped lang="less">
.gutter-row {
  background-color: #ececec;
  position: relative;
}

.gutter-box {
  background-color: #ececec;
}

.ant-col-16 {
  width: 60%;
}

.ant-col-8 {
  width: 40%;
}

/deep/ .ant-tabs-extra-content {
  line-height: 0 !important;
}

/deep/ .ant-tabs-nav-container-scrolling {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.effectiveTaskComp {
  .rightCompMainContBox {
    position: relative;
    min-height: 100px;
  }

  .todo-item {
    height: 32px;
    line-height: 32px;

    > a {
      display: block;
      display: flex;
    }

    .syday {
      font-size: 12px;
      color: #cdcdcd;
      flex: none;
    }

    .taskName {
      margin-left: 8px;
      flex: 1 0 0;
      margin-right: 40px;
    }
  }

  .paginationWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
  /deep/ .ant-tabs{
    overflow: unset !important;
  }
</style>
